<template>
  <div class="todo-item" :class="{ completed: todo.completed }">
    <div class="todo-content">
      <input type="checkbox" class="todo-checkbox" :value="todo.completed" @change="handleToggle" />

      <div class="todo-text">
        <input
          v-if="isEditing"
          ref="editInput"
          class="edit-input"
          type="text"
          :value="todo.text"
          @blur="finishEdit"
          @keyup.enter="finishEdit"
          @keyup.esc="cancelEdit"
        />
        <span v-else @dblclick="startEdit"> {{ todo.text }} </span>
      </div>
    </div>

    <div class="todo-actions">
      <button class="edit-btn" title="编辑" @click="startEdit">✏️</button>
      <button class="delete-btn" title="删除" @click="deleteTodo">🗑️</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TodoItemType } from '@/types/storeType'
import { nextTick, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
interface Emits {
  edit: [id: number, text: string]
  toggle: [id: number]
  remove: [id: number]
}
// interface Emits {
//   (e: 'edit', id: number, text: string): void
//   (e: 'toggle', id: number): void
//   (e: 'remove', id: number): void
// }

const { todo } = defineProps<{
  todo: TodoItemType
}>()

const emit = defineEmits<Emits>()

const isEditing = ref(false)
const editInput = ref<HTMLInputElement>()

function handleToggle() {
  emit('toggle', todo.id)
}
function startEdit() {
  if (todo.completed) return
  isEditing.value = true
  nextTick(() => {
    editInput.value?.focus()
  })
}
function finishEdit(e: Event) {
  const target = e.target as HTMLInputElement
  const value = target.value.trim()
  if (value && value !== todo.text) {
    emit('edit', todo.id, value)
  }
  isEditing.value = false
}
function cancelEdit() {
  isEditing.value = false
  editInput.value!.value = todo.text
}

function deleteTodo() {
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    emit('remove', todo.id)
  })
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: white;
  transition: all 0.3s;
}

.todo-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.todo-item.completed {
  opacity: 0.6;
  background: #f8f9fa;
}

.todo-content {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 1rem;
}

.todo-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

.todo-text {
  flex: 1;
  font-size: 1rem;
}

.todo-text span {
  cursor: pointer;
  user-select: none;
}

.todo-item.completed .todo-text span {
  text-decoration: line-through;
  color: #7f8c8d;
}

.edit-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #3498db;
  border-radius: 4px;
  font-size: 1rem;
}

.edit-input:focus {
  outline: none;
  border-color: #2980b9;
}

.todo-actions {
  display: flex;
  gap: 0.5rem;
}

.edit-btn,
.delete-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.edit-btn:hover {
  background: #ecf0f1;
}

.delete-btn:hover {
  background: #f8d7da;
}
</style>
